const gulp = require('gulp'),
      htmlmin=require('gulp-htmlmin'),
      cleanCss=require("gulp-clean-css"),
      uglify=require("gulp-uglify"),
      babel=require("gulp-babel"),
      del=require('del'),
      connect=require("gulp-connect"),
      {createProxyMiddleware}=require('http-proxy-middleware'),
      sass=require('gulp-sass')


const path={
    html:{
        src:"src/**/*.html",
        dest:'dist'
    },
    css:{
        src:'src/css/**/*.scss',
        dest:'dist/css'
    },
    js:{
        src:'src/js/**/*.js',
        dest:'dist/js'
    },
    images:{
        src:'src/images/**',
        dest:'dist/images'
    },
    libs:{
        src:'src/libs/**',
        dest:'dist/libs'
    }
}

const watch=()=>{
    gulp.watch(path.html.src,html)
    gulp.watch(path.css.src,css)
    gulp.watch(path.js.src,js)
}
      
const server=()=>{
    connect.server({
        root:'dist',
        port:2334,
        livereload:true,
        middleware(){
            return [
                createProxyMiddleware('/api',{
                    target:'https://apiv2.pinduoduo.com',
                    changeOrigin:true
                })
            ]
        }
    })
}

const delDist =()=>del('dist')

const html=()=>{
    return gulp.src(path.html.src)
    .pipe(htmlmin({
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS 
    }))
    .pipe(gulp.dest(path.html.dest))
    .pipe(connect.reload())
}

const css=()=>{
    return gulp.src(path.css.src)
    .pipe(sass())
    .pipe(cleanCss())
    .pipe(gulp.dest(path.css.dest))
    .pipe(connect.reload())

}
//这是注释
const js=()=>{
    return gulp.src(path.js.src)
    .pipe(babel({
        presets: ['@babel/env']
    }))
    //.pipe(uglify())
    .pipe(gulp.dest(path.js.dest))
    .pipe(connect.reload())
}
 
const images=()=>gulp.src(path.images.src).pipe(gulp.dest(path.images.dest))

const libs=()=>gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))


module.exports.default=gulp.series(delDist,gulp.parallel(html,css,js,images,libs,watch,server))